<!-- 23页面组件 create by hxg 2021/12/14  -->
<!-- 23页面组件 create by hxg 2021/12/14  -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="RecipeParameterSettingHistory"
      :model="queryForm"
      >
      <a-row
        :gutter="[16, 0]"
      >
        <a-col :span="7">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: $t('T9_shopId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="select-width" @change="changeShopId">
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item :label="$t('T9_bayId')" name="bayId" prop="bayId" :rules="{ required: true, message: $t('T9_bayId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.bayId" class="select-width" @change="changeBayId">
              <a-select-option v-for="item in bayIdArr"
              :key="item.bayId" :value="item.bayId">
              {{item.bayId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId" :rules="{ required: true, message: $t('T9_eqpId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.eqpId" class="select-width">
              <a-select-option v-for="item in eqpIdArr"
              :key="item.eqpId" :value="item.eqpId">
              {{item.eqpId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item :label="$t('T9_recipeName')" name="recipeName" prop="recipeName">
            <a-select v-model:value="queryForm.recipeName" class="select-width">
              <a-select-option v-for="item in recipeNameArr"
              :key="item" :value="item">
              {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_parameterList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      :data="table.data"
    >
      <t-column field="eqpId" :title="$t('T9_eqpId')" />
      <t-column field="recipeName" :title="$t('T9_recipeName')" />
      <t-column field="paramName" :title="$t('T9_paramName')" />
      <t-column field="desc" :title="$t('T9_desc')" />
      <t-column field="dataType" :title="$t('T9_dataType')" />
      <t-column field="validationType" :title="$t('T9_validationType')" />
      <t-column field="target" :title="$t('T9_target')" />
      <t-column field="lowerLimit" :title="$t('T9_lowerLimit')" />
      <t-column field="upperLimit" :title="$t('T9_upperLimit')" />
      <t-column field="subUnitId" :title="$t('T9_subUnitId')" />
      <t-column field="subRecipeId" :title="$t('T9_subRecipeId')" />
      <t-column field="tracelevel" :title="$t('T9_tracelevel')" />
      <t-column field="ver" :title="$t('T9_ver')" />
    </t-table>
      <t-query-form layout="inline"
      ref="dataForm"
      :model="dataForm"
      class="footQueryForm"
      >
        <a-row
        :gutter="[16, 0]"
      >
      <a-col :span="3">
        <p class="tipsName"><span>{{$t('T9_copyTo')}}</span><span>：</span></p>
      </a-col>
         <a-col :span="7">
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId" :rules="{ required: true, message: $t('T9_eqpId'), trigger: 'change'}">
            <a-select v-model:value="dataForm.eqpId" class="select-width">
              <a-select-option v-for="item in eqpIdArr"
              :key="item.eqpId" :value="item.eqpId">
              {{item.eqpId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item :label="$t('T9_recipeName')" name="recipeName" prop="recipeName" :rules="{ required: true, message: $t('T9_recipeName'), trigger: 'change'}">
            <a-select v-model:value="dataForm.recipeName" class="select-width">
              <a-select-option v-for="item in recipeNameArr"
              :key="item" :value="item">
              {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        </a-row>
      </t-query-form>

      <t-query-form layout="inline"
      ref="dataForm"
      :model="footForm"
      class="footQueryForm"
      >
        <a-row
        :gutter="[16, 0]"
      >
       <a-col :span="24">
          <a-form-item :label="$t('T9_comment')" name="comment" prop="comment" :rules="{ required: true, message: $t('T9_comment'), trigger: 'change'}">
            <a-input v-model:value="footForm.comment" />
          </a-form-item>
        </a-col>
        </a-row>
      </t-query-form>
      <div class="footBtn">
         <a-button type="primary">{{$t('T9_copy')}}</a-button>
          <a-button type="primary" style="margin-left:10px;">{{$t('T9_delete')}}</a-button>
      </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import {
    getShopId,
    getBayId,
    getEqpId,
    getOwnerType,
    getOwnerId,
    getList
  } from '@/api/common'
  import { getCurrentDate } from '@/utils/utils'

  export default defineComponent({
    name: 'RecipeParameterSettingHistory',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        shopIdArr: [],
        bayIdArr: [],
        eqpIdArr: [],
        ownerTypeArr: [],
        ownerArr: [],
        recipeNameArr: [],
        queryForm: {
          shopId: 'CELL',
          bayId: '',
          eqpId: '',
          recipeName: ''
        },
        dataForm: {
          eqpId: '',
          recipeName: ''
        },
        footForm: {
          comment: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getBayId()
      this.getShopId()
      // this.getOwnerType()
      this.queryForm.Date = [moment(getCurrentDate(), 'YYYY-MM-DD HH:mm'), moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm')]
    },
    methods: {
      onChange(value, dates) {
        this.queryForm.Date = dates
        console.log('Selected Time: ', this.queryForm.Date[0])
      },
      getList() {
        const obj = {
          dtoName: 'PortHistoryDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') * 1000 : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') * 1000 : null,
          eqpId: this.queryForm.eqpId,
          portId: this.queryForm.portId,
          queryId: 'GetPortHistoryList',
          version: '80002',
          menuName: 'portHistory',
          usage: 'queryPortHistoryList'
        }
        getList(obj).then(res => {
          this.table = res
        })
      },
      handleSearch() {},
      changeShopId(val) {
        if (val) {
          this.getBayId()
        }
      },
      changeOwnerType(val) {
        if (val) {
          this.getOwner()
        }
      },
      changeBayId(val) {
        if (val) {
          this.getEqpId()
        }
      },
      getShopId() {
        const params = {
          userGroup: 'CellPIOper'
        }
        getShopId(params).then(res => {
          this.shopIdArr = res
        })
      },
      getBayId() {
        const params = {
          shopId: this.queryForm.shopId
        }
        getBayId(params).then(res => {
          this.bayIdArr = res
        })
      },
      getEqpId() {
        const params = {
          bayId: this.queryForm.bayId,
          shopId: this.queryForm.shopId
        }
        getEqpId(params).then(res => {
          this.eqpIdArr = res
        })
      },
      getOwnerType() {
        getOwnerType().then(res => {
          this.ownerTypeArr = res
        })
      },
      getOwner() {
        const params = {
          ownerType: this.queryForm.ownerType,
          shopId: this.queryForm.shopId
        }
        getOwnerId(params).then(res => {
          this.ownerArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row, .ant-row:after, .ant-row:before {
    display: flex;
    flex: 1;
}
.footBtn{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.tipsName{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  span{
    font-size: 20px;
    color: black;
    font-weight: 600;
  }
}
</style>
